<template>
  <!-- 待评价 -->
  <div class="dingdan">
    <div v-show="show">
      <!-- 购买的商品 -->
      <div class="gmd" v-for="(val, key) in ding" :key="key">
        <div class="top">
          <span class="img"></span>
          <span>吊灯旗舰店1</span>
          <span class="arrow"></span>
          <span class="store">卖家已发货</span>
        </div>
        <div class="middle">
          <img :src="val.shopSrc" alt="" />
          <div class="r">
            <p>{{ val.shopFont }}</p>
            <p class="kuan">{{ val.addKuan }}</p>
            <p class="time">48小时内发货</p>
          </div>
          <div class="qian">
            <p>{{ val.shopMoney }}</p>
            <p>
              <span>{{ val.shopCount }}</span>
              <span>X</span>
            </p>
          </div>
        </div>
        <!-- 下面的内容 -->
        <div class="bottom">
          <p class="gong">
            <span class="pu">
              <span>总价￥{{ val.shopCount * val.shopTotal }}，</span>
              <span>优惠￥5.00</span>
            </span>
            <span class="kuai">实付款</span>
            <span class="ji">
              <span>￥</span>
              <span>{{ val.shopCount * val.shopTotal - val.shopYou }}</span>
            </span>
          </p>
        </div>

        <!-- 确定收货 -->
        <div class="define">
          <span class="more">更多</span>
          <span class="box">加入购物车</span>
          <span class="box1">查看物流</span>
          <span class="box1 color">确认收货</span>
        </div>
      </div>
    </div>
    <!-- 没有内容时 -->
    <div v-show="!show">
      <div class="picture">
        <div class="iconfont icon-dingdan- fuli cir"></div>
        <p class="ding">您还没有相关的订单</p>
        <p class="mai">可以去看看有哪些想买的</p>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      ding: [],
      flag: false,
      count: 0,
      top: false, //置顶的图标
      xian: false, //头部
      show: false, //待评价
    };
  },
  mounted() {
    // 获取数据
    window.addEventListener("scroll", this.handleScroll, true);
    window.scrollTo(0, 0);
    this.ding = this.$store.state.ding;
    setTimeout(() => {
      // console.log(this.ding.length);
      this.count = this.ding.length;
    }, 200);
  },
  computed: {
    //动态的获取总价
    shop_Total() {
      var newShop = this.ding.filter((val) => {
          return val.isChecked;
        }),
        totals = 0;
      for (var i = 0; i < newShop.length; i++) {
        totals +=
          newShop[i].shopTotal * newShop[i].shopCount - newShop[i].shopYou;
      }
      return totals;
    },
  },
  methods: {
    yun(e, id) {
      e.target.checked
        ? (this.ding[id].shopTotal += this.ding[id].shopYun)
        : (this.ding[id].shopTotal -= this.ding[id].shopYun);
    },
    del() {
      this.ding = [];
      this.$store.commit("aaContents", 200);
    },
    shang() {
      // 置顶
      $("html").animate(
        {
          scrollTop: 0,
        },
        200,
        "linear"
      );
    },
    //  管理显示隐藏
    handleScroll() {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      // 向上的图标显示
      if (top > 20) {
        this.top = true;
        this.xian = true;
      } else {
        this.top = false;
        this.xian = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.dingdan {
  //   购买的商品
  .gmd {
    margin: 15px 15px 0 15px;
    border-radius: 10px;
    background-color: #fff;
    padding-bottom: 15px;
    .top {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
      .img {
        margin: 12px 10px;
        width: 25px;
        height: 25px;
        background: url(/img/logo.9f4a35a3.png) -22px -5px no-repeat;
        background-size: 288%;
        float: left;
      }
      // 箭头
      .arrow {
        width: 8px;
        height: 8px;
        border-top: 1px solid #d6d6d6;
        border-left: 1px solid #d6d6d6;
        display: inline-block;
        margin: 10px 10px 0;
        transform: rotate(135deg);
      }
      // 商家
      .store {
        margin-left: 108px;
        font-size: 13px;
        color: #ffa863;
      }
    }
    // tupian
    .middle {
      // width: 100px;
      height: 100px;
      img {
        width: 100px;
        height: 100px;
        float: left;
        border: 1px solid #c6c6c6;
        margin: 0 10px;
        border-radius: 5px;
      }
      .r {
        font-size: 13px;
        width: 150px;
        float: left;
        p {
          color: #353535;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .kuan {
          margin-top: 10px;
          // background-color: #fafafa;
          color: #c6c6c6;
          border-radius: 5px;
        }
        // 48小时内发货
        .time {
          margin-top: 5px;
          color: #df8842;
        }
      }
      .qian {
        float: right;
        margin-right: 15px;
        p {
          font-size: 15px;
          span {
            font-size: 13px;
            float: right;
            color: #b7b7b7;
          }
        }
      }
    }
    // 下面的内容
    .bottom {
      font-size: 13px;
      p {
        margin: 15px 0;
        .pei {
          margin-right: 10px;
        }
        .pu {
          color: #b7b7b7;
        }
        .kuai {
          margin-left: 105px;
        }
        .jian_t {
          width: 8px;
          height: 8px;
          border-top: 1px solid #d5d5d5;
          border-left: 1px solid #d5d5d5;
          display: inline-block;
          margin-left: 10px;
          transform: rotate(135deg);
        }
      }
      .yun {
        .kuai {
          font-size: 15px;
          margin-left: 76px;
        }
        // 选中的情况
        input {
          width: 13px;
          height: 13px;
          margin-left: 10px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            background: url("../../public/img/check.png") no-repeat;
            background-size: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            top: -1px;
            left: -1px;
          }
        }
        // 未选中的状态
        input:checked {
          width: 13px;
          height: 13px;
          margin-right: 10px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            background: url("../../public/img/check1.png") no-repeat;
            background-size: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            top: -1px;
            left: -1px;
          }
        }
      }
      .dian {
        .kuai {
          color: #ffa863;
          font-size: 15px;
          margin-left: 97px;
        }
      }
      .ding {
        input {
          outline: none;
          border: transparent;
          width: 230px;
        }
        input:focus::-webkit-input-placeholder {
          color: transparent;
        }
        input::-webkit-input-placeholder {
          color: #adadad;
        }
      }
      .gong {
        margin-bottom: 10px;
        .pu {
          margin-left: 94px;
        }
        .kuai {
          margin-left: 5px;
        }
        .ji {
          color: #000;
          font-size: 15px;
        }
      }
    }
    // 确定收货
    .define {
      margin: 15px 10px 0;
      span {
        font-size: 12px;
      }
      .more {
        color: #afafaf;
      }
      .box {
        border: 1px solid #ededed;
        padding: 6px 15px;
        border-radius: 25px;
        margin: 0 5px 0 20px;
      }
      .box1 {
        border: 1px solid #ededed;
        padding: 6px 15px;
        border-radius: 25px;
        margin: 0 5px;
      }
      .color {
        color: #ffa863;
        border: 1px solid #ffa863;
      }
    }
  }
  // 没有内容时
  .picture {
    text-align: center;
    height: 200px;
    .cir {
      font-size: 80px;
      color: #dbb67b;
      transform: rotate(-17deg);
    }
    p {
      font-size: 13px;
    }
    .ding {
      color: #727272;
    }
    .mai {
      margin-top: 5px;
      color: #a7a7a7;
    }
  }
}
</style>

